<!-- 及时通讯 -->
<template>
  <div class='chat' @contextmenu.prevent>
    <el-row>
      <el-col>
        <div class="grid-content chatContent bg-purple">
          <h1 class="chatTxt">聊天</h1>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- 左侧联系人列表 -->
          <contactList @contactsInfo="contactsInfo" />
        </div>
      </el-col>
      <el-col :span="12" v-show="switchContactsInfo.receiverUserName">
        <div class="grid-content bg-purple">
          <!-- <div class="contact information contactInformation">
            <span
              class="contactName">{{switchContactsInfo.senderUserAccountType == 2 ? switchContactsInfo.receiverUserName : switchContactsInfo.senderUserName || '暂无'}}</span>
            <span>{{switchContactsInfo.companyName || '暂无'}}</span>
            <el-divider direction="vertical"></el-divider>
            <span>{{switchContactsInfo.jobName || '运营经理'}}</span>
          </div> -->
          <div class="contact information contactInformation">

            沟通职位
            <span class="contactName">
              <!-- <router-link to="apple"> {{switchContactsInfo.jobName || '暂无'}}</router-link> -->
              <el-link :underline="false" type="primary" @click="enterDetailsPage(switchContactsInfo)">
                {{switchContactsInfo.jobName || '暂无'}}</el-link>
              &nbsp;{{switchContactsInfo.wage || '暂无'}}
              &nbsp;{{switchContactsInfo.companyName || '暂无'}}
            </span>
          </div>
          <!-- 右侧聊天区 -->
          <chatRegion :switchContactsInfo="switchContactsInfo" />
        </div>
      </el-col>

      <el-col :span="6" v-show="switchContactsInfo.receiverUserName">
        <div class="grid-content bg-purple">
          <!-- 简历介绍 -->
          <resumeIntroduction :switchContactsInfo="switchContactsInfo" />
        </div>
      </el-col>

      <el-col :span="18" v-show="!switchContactsInfo.receiverUserName">
        <div class="grid-content bg-purple">
          <div class="noContacts">
            <h6>未与任何求职者沟通</h6>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  components: {},
  data () {
    return {
      switchContactsInfo: {},
      VUE_APP_URL: process.env.VUE_APP_URL
    };
  },
  computed: {},
  watch: {},
  methods: {
    contactsInfo (info) {
      console.log(info, 'info')
      this.switchContactsInfo = info
    },    // 进入主站中的职位详情页
    enterDetailsPage (item) {
      window.open(this.VUE_APP_URL + '/#/JobHunting/jobdetail?id=' + item.jobId, '_blank')
    },
  },
  created () {

  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.chat {
    width: 100%;
    /* height: 460px; */
    height: 669px;
    background: #ffffff;
}
.chatContent {
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.chatTxt {
    width: 130px;
    line-height: 69px;
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
}

.contactInformation {
    width: calc(100% - 20px);
    height: 49px;
    padding-left: 20px;
    line-height: 49px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    border-right: 1px solid rgba(232, 232, 232, 1);
}

.contactInformation .contactName {
    /* width: 92px; */
    display: inline-block;
    text-align: center;
    /* font-weight: 600; */
    margin-right: 15px;
}

.bg-purple .noContacts {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
    border-left: 1px solid #e5e5e5;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 200;
    color: rgba(153, 153, 153, 1);
}
</style>